<template>
    <view class="page-box">
        <view class="order-view" v-for="(res, i) in list" :key="i">
            <view class="top u-border-bottom">
                <view class="left">{{ `订单号：${res.order_no}` }}</view>
                <view class="right" v-if="res.status == 80">
                    <text :class="statusTypeClass[10]">待成团/</text>
                    <text :class="statusTypeClass[20]">已支付</text>
                </view>
                <view class="right" v-else :class="statusTypeClass[res.status]">{{
                    res.status_text
                }}</view>
            </view>
            <view
                class="item"
                v-for="(item, index) in res.products"
                :key="index"
                @click="handleCoursePath(res)"
            >
                <!-- 课程 -->
                <template
                    v-if="
                        item.type_id == 1 ||
                        item.type_id == 2 ||
                        item.type_id == 3 ||
                        item.type_id == 4
                    "
                >
                    <courseImage
                        width="238"
                        height="132"
                        :image="item.cover_url"
                        :courseType="item.course_type"
                        :courseTypeText="item.type_text"
                    ></courseImage>
                    <view class="content">
                        <view class="title u-line-1">{{ item.title }}</view>
                        <template v-if="res.status == 20">
                            <view class="end-time" v-if="item.expire_rest == -1">永久有效</view>
                            <view class="end-time" v-else-if="item.expire_rest === 0">
                                课程已过期
                            </view>
                            <view class="end-time" v-else
                                >距离课程到期还有<label style="color: #f54030">{{
                                    item.expire_rest
                                }}</label
                                >天</view
                            >
                        </template>
                    </view>
                    <view class="right">
                        <view class="price">{{ item.price | formatCurrency }}</view>
                        <!-- <view class="scribing">{{ item.scribing_price | formatCurrency }}</view> -->
                    </view>
                </template>
                <!-- 考试/专项套卷 -->
                <template v-else-if="item.type_id == 8 || item.type_id == 9 || item.type_id == 10">
                    <u-tag
                        text="考试"
                        mode="plain"
                        size="mini"
                        class="type"
                        color="#1644ff"
                        border-color="#1644ff"
                    />
                    <view class="content">
                        <view class="title u-line-2">{{ item.title }}</view>
                        <template v-if="res.status == 20">
                            <view class="end-time" v-if="item.expire_rest == -1">永久有效</view>
                            <view class="end-time" v-else-if="item.expire_rest === 0">
                                课程已过期
                            </view>
                            <view class="end-time" v-else
                                >距离课程到期还有<text class="red">{{ item.expire_rest }}</text
                                >天</view
                            >
                        </template>
                    </view>
                    <view class="right">
                        <view class="price">{{ item.price | formatCurrency }}</view>
                    </view>
                </template>
                <!-- 课时 -->
                <template
                    v-else-if="
                        item.type_id == 101 ||
                        item.type_id == 102 ||
                        item.type_id == 103 ||
                        item.type_id == 104
                    "
                >
                    <u-tag
                        :text="item.type_text"
                        mode="plain"
                        size="mini"
                        class="type"
                        :color="sectionTypeClass(item.type_id)"
                        :border-color="sectionTypeClass(item.type_id)"
                    />
                    <view class="content">
                        <view class="title u-line-2">{{ item.title }}</view>
                        <template v-if="res.status == 20">
                            <view class="end-time" v-if="item.expire_rest == -1">永久有效</view>
                            <view class="end-time" v-else-if="item.expire_rest === 0">
                                课程已过期
                            </view>
                            <view class="end-time" v-else
                                >距离课程到期还有<text class="red">{{ item.expire_rest }}</text
                                >天</view
                            >
                        </template>
                    </view>
                    <view class="right">
                        <view class="price">{{ item.price | formatCurrency }}</view>
                    </view>
                </template>
                <!-- 商品 -->
                <template v-else-if="item.type_id == 11">
                    <edu-image
                        :width="132"
                        :height="132"
                        :src="item.cover_url"
                        :border-radius="6"
                    ></edu-image>
                    <view class="content">
                        <view class="title u-line-2">{{ item.title }}</view>
                        <view class="end-time">x{{ res.ext_data.num }}</view>
                    </view>
                    <view class="right">
                        <block v-if="res.ext_data.credit_price > 0 && res.ext_data.cash_price > 0">
                            <view class="price">{{ res.ext_data.credit_price }}积分</view>
                            <view class="price"
                                >+{{ res.ext_data.cash_price | formatCurrency }}</view
                            >
                        </block>
                        <view class="price" v-else-if="res.ext_data.credit_price > 0"
                            >{{ res.ext_data.credit_price }}积分</view
                        >
                        <view class="price" v-else-if="res.ext_data.cash_price > 0">{{
                            res.ext_data.cash_price | formatCurrency
                        }}</view>
                        <view class="free" v-else>免费</view>
                    </view>
                </template>
            </view>
            <view
                class="logistics"
                v-if="
                    res.order_type == 11 &&
                    res.fictitious == 0 &&
                    res.ext_data.title &&
                    res.ext_data.order
                "
            >
                {{ res.ext_data.title }}: {{ res.ext_data.order }}
                <u-icon
                    name="order_copy_icon"
                    custom-prefix="edu-icon"
                    size="26"
                    color="#303133"
                    @click="handleCopy(res.ext_data.order)"
                ></u-icon>
            </view>
            <view class="total u-border-top">
                <view class="time">{{ res.create_time | timeFormat('yyyy-mm-dd hh:MM') }}</view>
                <view class="price">
                    实付:
                    <block v-if="res.order_type == 11">
                        <block v-if="res.payment > 0 && res.credit.credit > 0">
                            <text>{{ res.credit.credit }}积分+</text>
                            <text>{{ res.payment | formatCurrency }}</text>
                        </block>
                        <text v-else-if="res.credit.credit > 0">{{ res.credit.credit }}积分</text>
                        <text v-else-if="res.payment > 0">{{ res.payment | formatCurrency }}</text>
                        <text v-else class="free">免费</text>
                    </block>
                    <text v-else>{{ res.payment | formatCurrency }}</text>
                </view>
            </view>
            <view class="bottom" v-if="res.status == 0"
                ><view class="btn" @click="handleDeleteOrder(res.order_no)">删除订单</view></view
            >
            <view class="bottom" v-else-if="res.status == 10">
                <view class="btn" @click="handleCancelOrder(res.order_no)">取消订单</view>
                <view class="evaluate btn" @click="handlePayOrder(res.order_no, res.payment)"
                    >去支付</view
                >
            </view>
        </view>

        <!-- 操作弹窗 -->
        <u-modal
            v-model="deleteVisible"
            :content="content"
            :show-title="false"
            show-cancel-button
            mask-close-able
            @confirm="handleConfirm"
            :confirm-text="confirmText"
            cancel-text="再想想"
            confirm-color="#f54030"
            :confirm-style="{ borderLeft: '1px solid #e4e7ed' }"
        ></u-modal>
    </view>
</template>

<script>
/* 订单类型order_type【0：购物车（课程）；1：点播；2：直播；3：面授；4：班级；5：会员；6：余额；7：积分；8：公开考试；9：专项练习；10：套卷；11：商品；】
	type_id【1：点播；2：直播；3：面授；4：班级；101：点播课时视频；102：点播课时音频；103：点播课时图文；104：点播课时电子书；5：会员；6：余额；7：积分；8：公开考试；9：专项练习；10：套卷；11：商品；】 */
import courseImage from '@/components/common/courseImage.vue'
import { mapGetters } from 'vuex'
import uniCopy from '@/utils/xb-copy/uni-copy.js'
export default {
    components: {
        courseImage,
    },
    props: {
        value: {
            type: String,
            default: '',
        },
        time_type: {
            type: String,
            default: '',
        },
        list: {
            type: Array,
            default: () => {
                return []
            },
        },
    },
    data() {
        return {
            deleteVisible: false,
            confirmText: '',
            content: '',
            type: 0,
            orderId: 0,
            statusTypeClass: {
                0: 'cancel',
                10: 'no-pay',
                20: 'yes-pay',
                80: 'yes-pay',
            },
        }
    },
    computed: {
        ...mapGetters({
            globPrimary: 'designSetting/getGlobTheme',
            globPrimaryColor: 'designSetting/getGlobThemeColor',
        }),
    },
    options: { styleIsolation: 'shared' },
    methods: {
        // 取消订单
        handleCancelOrder(id) {
            this.type = 1
            this.orderId = id
            this.confirmText = '取消'
            this.content = '是否取消该订单'
            this.deleteVisible = true
        },
        // 删除订单
        handleDeleteOrder(id) {
            this.type = 2
            this.orderId = id
            this.confirmText = '删除'
            this.content = '确认删除吗?'
            this.deleteVisible = true
        },
        // 确定
        handleConfirm() {
            // 1取消订单，2删除订单
            if (this.type == 1) {
                this.$edu.api
                    .putUserOrderCancel({
                        order_no: this.orderId,
                    })
                    .then((res) => {
                        this.$u.toast(res.msg)
                        this.$emit('update')
                    })
                    .catch((res) => {
                        this.$u.toast(res.msg)
                    })
            } else if (this.type == 2) {
                this.$edu.api
                    .deleteUserOrder({
                        order_no: this.orderId,
                    })
                    .then((res) => {
                        this.$u.toast(res.msg)
                        this.$emit('update')
                    })
                    .catch((res) => {
                        this.$u.toast(res.msg)
                    })
            }
        },
        // 支付订单
        handlePayOrder(no, payment) {
            this.$u.route('pages/pay', {
                no: no,
                payment: payment,
                redirect_type: 'order',
            })
        },
        // 跳转
        handleCoursePath(item) {
            this.$u.route('pageUser/order/details', {
                id: item.order_no,
            })
        },
        //复制
        handleCopy(val) {
            uniCopy({
                content: val,
                success: (res) => {
                    this.$u.toast(res)
                },
                error: (err) => {
                    this.$u.toast(err)
                },
            })
        },
        sectionTypeClass(id) {
            let color = {
                101: this.globPrimaryColor,
                102: '#67c23a',
                103: '#783ce6',
                104: '#e6a23c',
            }
            return color[id] || ''
        },
    },
}
</script>

<style lang="scss" scoped>
.page-box {
    padding: 30rpx 30rpx 0;
}
.order-view {
    box-shadow: 0 2rpx 24rpx 0 rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    margin-bottom: 32rpx;
    .top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 15rpx 24rpx;
        .left {
            font-size: 28rpx;
            font-weight: 400;
            color: $edu-content-color;
        }
        .right {
            font-size: 28rpx;
            font-weight: 400;
            color: #606266;
        }
        .yes-pay {
            color: $edu-free-color;
        }
        .no-pay {
            color: $edu-price-color;
        }
        .cancel {
            color: $edu-content-color;
        }
    }
    .item {
        display: flex;
        align-items: flex-start;
        padding: 30rpx 24rpx;
        .content {
            flex: 1;
            min-width: 260rpx;
            margin-left: 24rpx;
            margin-right: 30rpx;
            .title {
                font-size: 30rpx;
                font-weight: 400;
                color: $edu-main-color;
            }
            .end-time {
                font-size: 22rpx;
                color: #909399;
                margin-top: 14rpx;
            }
            .red {
                color: $edu-price-color;
            }
        }
        .right {
            margin-left: auto;
            .price {
                font-size: 28rpx;
                font-weight: 400;
                color: $edu-main-color;
                text-align: right;
            }
            .scribing {
                font-size: 24rpx;
                font-weight: 400;
                color: $edu-tips-color;
            }
            .free {
                font-size: 28rpx;
                font-weight: 400;
                color: $edu-free-color;
                text-align: right;
            }
        }
        .type,
        .type /deep/.u-tag {
            margin-top: 4rpx;
            border-radius: 0;
            border-top-left-radius: 8px;
            border-bottom-right-radius: 8px;
        }
    }
    .logistics {
        padding: 16rpx 24rpx;
        background: #f7f7f7;
        border-radius: 6rpx;
        font-size: 26rpx;
        font-weight: 400;
        color: $edu-content-color;
        margin: 0 24rpx 20rpx;
        display: flex;
        align-items: center;
        ::v-deep .edu-icon {
            margin-left: 10rpx;
        }
    }
    .total {
        margin: 0 24rpx;
        padding: 21rpx 0 24rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .time {
            font-size: 24rpx;
            font-weight: 400;
            color: $edu-content-color;
        }
        .price {
            font-size: 28rpx;
            font-weight: 400;
            color: $edu-content-color;
            text {
                font-size: 30rpx;
                font-weight: 400;
                color: $edu-price-color;
            }
            .free {
                color: $edu-free-color;
            }
        }
    }
    .bottom {
        padding: 0 24rpx 18rpx;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        .btn {
            margin-left: 24rpx;
            width: 140rpx;
            height: 56rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 28rpx;
            border: 2rpx solid $u-border-color;
            border-width: 2rpx;
            border-style: solid;
            @include border-color();
            @include text-color();
            font-size: 24rpx;
            font-weight: 400;
            &.evaluate {
                color: #ffffff;
                @include bg-color();
            }
        }
    }
}
</style>
